<template>
	<div>
		<!-- 头部搜索区域 -->
		<div class="header-search">
			<div>
				<Input class="input" v-model="nameSearch" placeholder="用户姓名" clearable />
				<Input class="input" v-model="mobileSearch" placeholder="用户手机号" clearable />
				<Button type="primary" icon="ios-search" @click="search">搜索</Button>
			</div>
		</div>
		<br /><br />
		<!-- 用户信息列表 -->
		<Table border :columns="columns1" :data="activityList"></Table>
		<!-- 分页 -->
		<br /><br />
		<div style="text-align: center;">
			<Page :total="total" show-sizer show-elevator @on-change="changePage" />
		</div>
		<!-- 删除模态框 -->
		<Modal v-model="modal1" title="删除活动" @on-ok="ok" @on-cancel="cancel">
			<p>您确定要删除此活动吗？</p>
		</Modal>
		<Modal v-model="modal2" title="拼团活动" @on-ok="success" @on-cancel="fail">
			<p>您确定要此活动已经平台成功吗？</p>
		</Modal>
	</div>
</template>
<script>
	import path from '@/api/path.js';
	let url = path.url;
	import axios from '@/libs/api.request';
	export default {
		data() {
			return {
				modal1: false,
				modal2: false,
				nameSearch: "",
				mobileSearch: "",
				columns1: [{
						title: '编号',
						key: 'id',
						align: 'center'
					},
					{
						title: '团长名称',
						key: 'name',
						align: 'center'
					},
					{
						title: '团长手机号',
						key: 'mobile',
						align: 'center'
					},
					{
						title: '验房地址',
						key: 'address',
						align: 'center'
					},
					{
						title: '创建时间',
						key: 'createTime',
						align: 'center'
					},
					{
						title: '状态',
						key: 'status',
						align: 'center'
					},
					{
						title: '操作',
						key: 'action',
						width: 150,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										margin: '3px 0'
									},
									on: {
										click: (e) => {
											this.goTeam(params.row);
										}
									}
								}, '人员名单'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									style: {
										margin: '3px 0',
										padding: '0px 19px'
									},
									on: {
										click: (e) => {
											this.delect(params.row.id)
										}
									}
								}, ' 删除 '),
								h('Button', {
									props: {
										type: 'success',
										size: 'small'
									},
									style: {
										margin: '3px 0'
									},
									on: {
										click: (e) => {
											this.team(params.row.id);
										}
									}
								}, '拼团成功')
							]);
						}
					}
				],
				activityList: [],
				total: 0,
				page: 1,
				delectId: 0,
				teamId: 0
			}
		},
		methods: {
			search() {
				this.getActivityList();
			},
			// 获取活动列表
			getActivityList() {
				axios.request({
					url: `${url}GroupFound/getGroupFoundList`,
					method: 'post',
					data: {
						page: this.page,
						name: this.nameSearch,
						mobile: this.mobileSearch
					}
				}).then(res => {
					if (res.data.status == 1) {
						this.activityList = res.data.content.data;
						this.total = res.data.content.total;
						this.activityList.forEach(item => {
							item.status == 0 ? item.status = '拼团中' : item.status == 1 ? item.status = '时间过期' : item.status == 2 ? item.status =
								'未联系' : item.status == 3 ? item.status = '拼团成功' : item.status = '已联系'
						})
					} else {
						throw res.data.msg
					}
				})
			},
			// 拼团处理
			team(id) {
				this.modal2 = true;
				this.teamId = id;
			},
			success(){
				this.teamSuccess(this.teamId);
			},
			fail(){
				this.$Message.info('您取消了拼团成功！');
			},
			// 点击删除
			delect(id) {
				this.modal1 = true;
				this.delectId = id;
			},
			// 确认删除
			ok() {
				axios.request({
					url: `${url}GroupFound/delGroupFound`,
					method: 'post',
					data: {
						id: this.delectId
					}
				}).then(res => {
					console.log(res);
					this.getActivityList();
				})
			},
			// 取消删除
			cancel() {
				this.$Message.info('您取消了删除此活动！');
			},
			changePage(idx) {
				this.page = idx;
				this.getActivityList();
			},
			// 跳转到人员名单
			goTeam(obj) {
				if (obj) {
					this.$router.push({
						name: 'teamList',
						query: {
							id: obj.id,
							address: obj.address,
							name: obj.name,
							time: obj.createTime,
							status: obj.status
						}
					});
				} else {
					this.$router.push({
						name: '/'
					});
				}
			},
			teamSuccess(id) {
				axios.request({
					url: `${url}GroupFound/editStatus`,
					method: 'post',
					data: {
						id: id
					}
				}).then(res => {
					if (res.data.status == 1) {
						this.getActivityList();
					} else {
						throw res.data.msg
					}
				})
			}
		},
		created() {
			this.getActivityList();
		}
	}
</script>
<style scoped="scoped">
	.header-search {
		display: flex;
		justify-content: space-between;
	}

	.input {
		width: 200px;
		margin-right: 20px;
	}
</style>
